<template>
  <el-container class="main-content">
    <el-aside :class="['main-aside', { 'shrink-w': isCollapse }]">
      <div class="main-logo">
        {{ isCollapse ? "企业" : "企业管理系统" }}
      </div>
      <div class="main-menu">
        <el-menu :default-active="nav.default" text-color="#555555">
          <template v-for="(item, index) in nav.list">
            <el-menu-item
              v-if="!item.children"
              :index="item.index"
              :key="index"
            >
              <div class="item-nav-content" @click="hanldSkip(item)">
                <img
                  :src="navActive(item.index) ? item.iconActiver : item.icon"
                />
                <span>{{ item.title }}</span>
              </div>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div @click="taggleCollapse()">
          <i class="el-icon-s-unfold" v-if="isCollapse"></i>
          <i class="el-icon-s-fold" v-else></i>
        </div>
        <div class="action-bar-content">
          <i class="el-icon-bell"></i>
          <i class="el-icon-setting"></i>
          <div class="user-info-content">
            <el-avatar
              size="medium"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <div class="dropdown-link-content">
              <el-dropdown trigger="click" @command="handleCommand">
                <div class="el-dropdown-link dropdown-link">
                  <div class="user-attribute">
                    <div class="name">admin</div>
                    <div class="departments">推广部主管</div>
                  </div>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">修改密码</el-dropdown-item>
                  <el-dropdown-item command="2">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { nav } from "@utils/nav.js";
import store from "@/store";
import router from "@/router";
export default {
  name: "main-frame",
  data() {
    return {
      isCollapse: false,
      nav: {},
    };
  },

  watch: {
    $route: {
      handler() {
        this.nav.default = this.$route.meta.index;
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    exit() {
      store.commit("removeToken");
      router.push("/login");
      console.log("退出");
    },
    handleCommand(command) {
      if (command == "2") {
        this.exit();
      }
    },

    // 导航收缩事件
    taggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    // 选中菜单图标样式
    navActive(index) {
      let is_aver = this.nav.default.charAt(0);
      return index === is_aver;
    },

    // 菜单切换
    hanldSkip(item) {
      if (this.$route.path === item.path) return;
      this.nav.default = item.index;
      this.$router.push({
        path: item.path,
      });
    },
  },

  created() {
    let type = "user";
    this.nav = nav[type];
    if (this.$route.path !== this.nav.list[0].path) {
      this.$router.push(this.nav.list[0].path);
    }
  },
};
</script>
<style lang="scss" scoped>
:deep(.container) {
  height: 100%;
}

.main-content {
  width: 100vw;
  height: 100vh;
  background-color: #f5f6fa;
}

.main-aside {
  display: flex;
  flex-direction: column;
  border-right: solid 1px #e6e6e6;
  background-color: #fff;
  box-sizing: border-box;
  width: 261px !important;
  transition: width 0.1s linear;
}

.shrink-w {
  width: 84px !important;
}

.main-logo {
  flex-shrink: 0;
  flex-grow: 0;
  width: 100%;
  height: 65px;
  background-color: #fff;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
  line-height: 65px;
  font-weight: bold;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
}

.main-menu {
  flex: 1;
  height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
}

.el-menu {
  border-right-width: 0;
}

::v-deep .el-menu-item {
  padding: 0 15px !important;
  padding-left: 15px !important;
}

::v-deep .el-menu-item {
  margin-bottom: 10px;
}

::v-deep .el-menu-item,
.el-submenu__title {
  height: 54px;
  line-height: 54px;
}

::v-deep .el-menu-item:focus,
.el-menu-item:hover {
  background-color: #fff;
}

::v-deep .el-menu-item.is-active {
  color: #555555;
}

::v-deep .el-menu-item.is-active .item-nav-content {
  color: #fff;
  background-color: #82a848;

  &::after {
    background-color: #c2d2aa;
  }
}

.el-menu--collapse {
  width: 80px;
}

.item-nav-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 14px;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

  &::after {
    width: 4px;
    height: 20px;
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    transform: translateY(-50%);
  }

  img {
    display: block;
    width: 24px;
    height: 24px;
  }
  span {
    font-size: 15px;
    margin-left: 15px;
    font-weight: bold;
  }
}

.el-header {
  height: 65px !important;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: solid 1px #e6e6e6;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.el-icon-s-unfold,
.el-icon-s-fold {
  font-size: 22px;
  color: #555;
  cursor: pointer;
  user-select: none;

  &:hover {
    color: #6c8e38;
  }
}

.action-bar-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  .el-icon-bell,
  .el-icon-setting {
    font-size: 24px;
    margin-left: 20px;
    flex-shrink: 0;
    flex-grow: 0;
    cursor: pointer;
    user-select: none;
    color: #555;
    &:hover {
      color: #6c8e38;
    }
  }

  .user-info-content {
    margin-left: 20px;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.dropdown-link-content {
  margin-left: 6px;
}

.dropdown-link {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;

  .user-attribute {
    margin-right: 2px;
    .name {
      color: #333;
    }

    .departments {
      color: #999;
      font-size: 12px;
    }
  }
}

::v-deep .el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ebf8de;
  color: #6c8e38;
}

.el-main {
  padding: 0;
  height: 100%;
}
</style>
